<template>
  <div class="userInfo" @click="active = !active">
    <div class="log">
      <i class="el-icon-message-solid" style="height: 16px;color: #ccc"></i>
      <!-- <div class="logNum">10</div> -->
    </div>
    <el-dropdown @command="handleCommand" size="small" placement="bottom"
                 trigger="click">
      <span class="avatar-dropdown">
        <div class="user">
          <el-avatar :size="30" :src="avatar" style="margin-right: 8px;">
          </el-avatar>

          <div class="userName">
            {{ $store.getters['user/userInfo'].userName }}
            <i :class="
                active
                  ? 'el-icon-arrow-up el-icon--right'
                  : 'el-icon-arrow-down el-icon--right'
              "></i>
          </div>
        </div>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>


import { logOut } from '@/utils/request.js'


export default {
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data () {
    //这里存放数据",
    return {
      // avatar: '@/assets/images/head.png',
      avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      active: false
    }
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    handleCommand (command) {
      switch (command) {
        case 'logout':
          this.logout()
          this.active = !this.active
          break
      }
    },
    async logout () {
      let token = sessionStorage.getItem('hawk_token')
      if (!token) {
        // 初次跳转页面
        console.log('初次跳转页面---');
        window.sessionStorage.removeItem('hawk_token')
        this.$router.push('/login')
        return 
      }
      let ret = await logOut(token)
      console.log(ret, '-------退出--');
      if (ret.code == 20000) {
        window.sessionStorage.removeItem('hawk_token')
        this.$router.push('/login')
      }


    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate () { },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () { },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted () { }
}
</script>

<style lang="scss">
.userInfo {
  display: flex;
  align-items: center;
  padding-left: 60px;
  background: #151f29;
  height: 60px;
  min-width: 230px;
  position: absolute;
  right: 0;

  .log {
    display: flex;
    margin-right: 40px;

    .logNum {
      margin-left: 8px;
      color: #fff;
      background: #d61d1d;
      padding: 0 6px;
      font-size: 12px;
      line-height: 16px;
      height: 16px;
      border-radius: 2px;
    }
  }

  .user {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    margin-right: 20px;
    color: #ffffff;
    font-size: 14px;

    .userName {
      .user-name {
        position: relative;
        margin-right: 8px;
        cursor: pointer;
      }
    }
  }
}
</style>
